From KMcGrane - fantastic slideshow on Drupal and incorporating Interactive Design.

1. CREATING USABLE WEBSITES
Do It With Drupal!
December 2008

2. Do It With Drupal | December 2008
Bond Art + Science
_Founder and Partner
School of Visual Arts
MFA in Interaction Design
_Interaction Design History
_Design Management
Razorfish
_First information architect
_VP and National Lead for
User Experience
Clients
_The New York Times
_Fast Company
_The Atlantic
_Condé Nast
_New York Public Library
_Disney Internet Group
_Encyclopedia Britannica
2
KAREN MCGRANE

3. Do It With Drupal | December 2008
DRUPAL IS SO POWERFUL!
3

4. Do It With Drupal | December 2008
DRUPAL HAS TOO MANY OPTIONS.
4

5. Do It With Drupal | December 2008
Drupal makes so many options available that
developers have a hard time knowing how to
choose the right ones so that the site makes
sense to the user. Could you pick some
common interactions and describe how to
make them more usable?
—Jeff Robbins
5

6. Do It With Drupal | December 2008
SURE!
6

7. Do It With Drupal | December 2008
SURE!
6
_Commenting

8. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation

9. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search

10. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search
_Listing pages

11. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search
_Listing pages
_Friending

12. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search
_Listing pages
_Friending
_Recent...

13. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search
_Listing pages
_Friending
_Recent...
_Calendar events

14. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search
_Listing pages
_Friending
_Recent...
_Calendar events
_Date/time stamps

15. Do It With Drupal | December 2008
SURE!
6
_Commenting
_Navigation
_Search
_Listing pages
_Friending
_Recent...
_Calendar events
_Date/time stamps
_Rate + Review

16. Do It With Drupal | December 2008
NO.
7

17. Do It With Drupal | December 2008
NO.
7
_Too many variables

18. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases

19. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs

20. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive

21. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
_Not actionable

22. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
_Not actionable
_Not in context

23. Do It With Drupal | December 2008
NO.
7
_Too many variables
_Can’t cover all cases
_Can’t cover all needs
_Too prescriptive
_Not actionable
_Not in context
_I don’t have all the
answers

24. Do It With Drupal | December 2008
BUT WAIT...
8

25. CREATING USABLE WEBSITES
using
INTERACTION DESIGN PATTERNS
Do It With Drupal!
December 2008

26. Do It With Drupal | December 2008
WHAT’S AN
INTERACTION
DESIGN PATTERN?
10
?

27. Do It With Drupal | December 2008
A pattern describes an optimal solution to a
common problem within a specific context.
—Christian Crumlish + Erin Malone
Authors, Designing Social Interfaces
Curators, Yahoo! Pattern Library
11

28. Do It With Drupal | December 2008
Design patterns describe best practices in
design.
—Jenifer Tidwell
Author, Designing Interfaces
Curator, UI Patterns and Techniques
12
Luke Wroblewski, Design Patterns: Introduction, 22 May 2006

29. Do It With Drupal | December 2008
A design pattern is a repeatable design
solution, that’s been tested, reviewed, and
verified.
—James Reffell
UI Design Manager, eBay Inc.
Curator, eBay Pattern Engine
13
Luke Wroblewski, Design Patterns: Introduction, 22 May 2006

30. Do It With Drupal | December 2008
ARCHITECTURE DESIGN PATTERNS
14

31. Do It With Drupal | December 2008
Conflict
Placing the main entrance (or main entrances) is perhaps the single most
important step you take during the evolution of a building plan.
Resolution
Place the main entrance of the building at a point where it can be seen
immediately from the main avenues of approach and give it a bold, visible
shape which stands out in front of the building.
May be part of:
Site Repair (104), South Facing Outdoors (105), Wings of Light (107), Circulation Realms
(98), Family of Entrances (102).
May contain:
Family of Entrances (102), Entrance Room (130), Entrance Transition (112), Shielded Parking
(97), Car Connection (113).
15
110 MAIN ENTRANCE

32. Do It With Drupal | December 2008
16

33. Do It With Drupal | December 2008
Each pattern describes a problem which occurs
over and over again in our environment, and
then describes the core of the solution to that
problem, in such a way that you can use this
solution a million times over, without ever
doing it the same way twice.
—Christopher Alexander, A Pattern Language
17

34. Do It With Drupal | December 2008
SOFTWARE DESIGN PATTERNS
18

35. Do It With Drupal | December 2008
INTERACTION DESIGN PATTERNS
19

36. Do It With Drupal | December 2008
COMMON GROUND
20

37. Do It With Drupal | December 2008
DESIGNING INTERFACES
21

38. Do It With Drupal | December 2008
DESIGNING INTERFACES
21

39. Do It With Drupal | December 2008
DESIGNING INTERFACES
21

40. Do It With Drupal | December 2008
UI PATTERNS
22

41. Do It With Drupal | December 2008
UI PATTERNS
22

42. Do It With Drupal | December 2008
UI PATTERNS
22

43. Do It With Drupal | December 2008
WELIE.COM
23

44. Do It With Drupal | December 2008
WELIE.COM
23

45. Do It With Drupal | December 2008
WELIE.COM
23

46. Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24

47. Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24

48. Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24

49. Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25

50. Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25

51. Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25

52. Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY
26

53. Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN
PATTERN LIBRARY
26

54. Do It With Drupal | December 2008
1. Identify common design problems
2. Describe solutions that work in practice
3. Explain why those solutions work in terms of
general principles
4. Show a variety of concrete visual examples that
demonstrate the range of the pattern
27
INTERACTION DESIGN PATTERNS

55. WHAT DOES THIS MEAN FOR ME?
How to use pattern libraries

56. LET’S PICK A COMMON PROBLEM

57. LET’S PICK A COMMON PROBLEM
Ratings
Reviews
Voting

58. EVALUATION/RATING
30

59. EVALUATION/RATING
30

60. RATINGS AND REVIEWS
31

61. RATINGS AND REVIEWS
31

62. RATINGS AND REVIEWS
31

63. VOTE TO PROMOTE
32

64. VOTE TO PROMOTE
32

65. VOTE TO PROMOTE
32

66. RATING
33

67. RATING
33

68. RATING
33

69. HERE’S ANOTHER ONE

70. HERE’S ANOTHER ONE
Collapsible panels
Accordion lists
Expandy widget

71. I’M SURE IT’S IN HERE SOMEWHERE...
35

72. I’M SURE IT’S IN HERE SOMEWHERE...
35

73. CLOSABLE PANELS
36

74. CLOSABLE PANELS
36

75. CLOSABLE PANELS
36

76. COLLAPSIBLE PANELS
37

77. COLLAPSIBLE PANELS
37

78. COLLAPSIBLE PANELS
37

79. ACCORDION MENU
38

80. ACCORDION MENU
38

81. ACCORDION MENU
38

82. COLLAPSE TRANSITION
39

83. COLLAPSE TRANSITION
39

84. WHAT DOES THIS MEAN FOR
THE DRUPAL COMMUNITY?
Three potential options

85. Do It With Drupal | December 2008
1. IGNORE THE SUBJECT
41
1

86. Do It With Drupal | December 2008
42
CALL FOR A PATTERN LIBRARY

87. Do It With Drupal | December 2008
42
CALL FOR A PATTERN LIBRARY

88. Do It With Drupal | December 2008
43
2
2. PARTNER WITH
SOMEONE ELSE

89. Do It With Drupal | December 2008
44
THE FLUID PROJECT

90. Do It With Drupal | December 2008
44
THE FLUID PROJECT

91. Do It With Drupal | December 2008
3. ROLL OUR OWN
45
3

92. Do It With Drupal | December 2008
_Give Drupal developers tools to help build more
usable websites
_Educate teams on a common vocabulary and
rationale for design decisions
_Address issues unique to Drupal or give specific
instructions for how to implement solutions
_Put patterns where developers will find them
_Take one small step toward more consistency
_Create a sense of community and ownership
46
WHY DRUPAL.ORG NEEDS ITS OWN
PATTERN LIBRARY

93. Do It With Drupal | December 2008
WHY DRUPAL.ORG SHOULDN’T BUILD
A PATTERN LIBRARY
_Many pattern libraries already exist; no need to
reinvent the wheel
_Patterns already exist as “modules” on Drupal.org
_No real community support for the effort
_Pattern libraries are too generic and don’t help solve
the real problem
_Hire an interaction designer, already
47

94. Do It With Drupal | December 2008
HOW WE MIGHT GO ABOUT
BUILDING A PATTERN LIBRARY
_Start soliciting “usability problems” on Drupal.org
_Create a working group to filter and prioritize
_Ask people to upload screenshots of sample
solutions
_Hold a “Pattern Camp” to review and edit
_Encourage commenting and tagging on Drupal.org
48

95. DESIGN PATTERNS SOURCES
49

96. DESIGN PATTERNS SOURCES
49

97. DESIGN PATTERNS SOURCES
49

98. www.bondartscience.com
info@bondartscience.com
212-226-6344
@bondartscience
Karen McGrane
karen@bondartscience.com
917-887-8149
@digitrix6
THANKS!